<template>
  <a-drawer
      v-model:open="open"
      :title="storageType!=null?'编辑':'新增'"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      placement="right"
      @close="close"
      width="50%"
  >
    <a-form :model="fromModel" style="margin: 30px 0"
            ref="formRef"
    :labelCol="{span:5}"
            :rules="rules"
    >
      <a-form-item label="存储类型" name="type">
        <a-select
            ref="select"
            v-model:value="fromModel.type"
        >
          <a-select-option :value="0">本地存储</a-select-option>
          <a-select-option :value="1">七牛云</a-select-option>
          <a-select-option :value="2">阿里云</a-select-option>
          <a-select-option :value="3">腾讯云</a-select-option>
          <a-select-option :value="4">SFTP</a-select-option>
        </a-select>
      </a-form-item>

      <div v-if="fromModel.type===0">
        <a-form-item label="域名" name="localDomain">
          <a-input v-model:value="fromModel.localDomain" placeholder="请输入域名"/>
        </a-form-item>
        <a-form-item label="路径" name="localPath">
          <a-input v-model:value="fromModel.localPath" placeholder="请输入路径"/>
        </a-form-item>

      </div>
      <div v-if="fromModel.type===1">
        <a-form-item label="域名" name="qiNiuDomain">
          <a-input v-model:value="fromModel.qiNiuDomain" placeholder="请输入域名"/>
        </a-form-item>
        <a-form-item label="路径前缀" name="qiNiuPrefix">
          <a-input v-model:value="fromModel.qiNiuPrefix" placeholder="请输入路径前缀"/>
        </a-form-item>
        <a-form-item label="accessKey" name="qiNiuAccessKey">
          <a-input v-model:value="fromModel.qiNiuAccessKey" placeholder="请输入accessKey"/>
        </a-form-item>
        <a-form-item label="secretKey" name="qiNiuSecretKey">
          <a-input v-model:value="fromModel.qiNiuSecretKey" placeholder="请输入secretKey"/>
        </a-form-item>
        <a-form-item label="预览链接签名生成密钥" name="qiNiuPreViewEncryptKey">
          <a-input v-model:value="fromModel.qiNiuPreViewEncryptKey" placeholder="请输入预览链接签名生成密钥"/>
        </a-form-item>
        <a-form-item label="储存桶名称" name="qiNiuBucketName">
          <a-input v-model:value="fromModel.qiNiuBucketName" placeholder="请输入储存桶名称"/>
        </a-form-item>

      </div>
      <div v-if="fromModel.type===2">
        <a-form-item label="域名" name="aliYunDomain">
          <a-input v-model:value="fromModel.aliYunDomain" placeholder="请输入域名"/>
        </a-form-item>
        <a-form-item label="路径前缀" name="aliYunPrefix">
          <a-input v-model:value="fromModel.aliYunPrefix" placeholder="请输入路径前缀"/>
        </a-form-item>
        <a-form-item label="accessKeyId" name="aliYunAccessKeyId">
          <a-input v-model:value="fromModel.aliYunAccessKeyId" placeholder="请输入accessKeyId"/>
        </a-form-item>
        <a-form-item label="accessKeySecret" name="aliYunAccessKeySecret">
          <a-input v-model:value="fromModel.aliYunAccessKeySecret" placeholder="请输入accessKeySecret"/>
        </a-form-item>

        <a-form-item label="储存桶名称" name="aliYunBucketName">
          <a-input v-model:value="fromModel.aliYunBucketName" placeholder="请输入储存桶名称"/>
        </a-form-item>
      </div>
      <div v-if="fromModel.type===3">
        <a-form-item label="域名" name="qCloudDomain">
          <a-input v-model:value="fromModel.qCloudDomain" placeholder="请输入域名"/>
        </a-form-item>
        <a-form-item label="路径前缀" name="qCloudPrefix">
          <a-input v-model:value="fromModel.qCloudPrefix" placeholder="请输入路径前缀"/>
        </a-form-item>
        <a-form-item label="APPId" name="qCloudAppId">
          <a-input v-model:value="fromModel.qCloudAppId" placeholder="请输入APPId"/>
        </a-form-item>
        <a-form-item label="secretId" name="qCloudSecretId">
          <a-input v-model:value="fromModel.qCloudSecretId" placeholder="请输入secretId"/>
        </a-form-item>
        <a-form-item label="secretKey" name="qCloudSecretKey">
          <a-input v-model:value="fromModel.qCloudSecretKey" placeholder="请输入secretKey"/>
        </a-form-item>
        <a-form-item label="储存桶名称" name="qCloudBucketName">
          <a-input v-model:value="fromModel.qCloudBucketName" placeholder="请输入储存桶名称"/>
        </a-form-item>
        <a-form-item label="地域" name="qCloudRegion">
          <a-input v-model:value="fromModel.qCloudRegion" placeholder="请输入地域"/>
        </a-form-item>
      </div>
      <div v-if="fromModel.type===4">
        <a-form-item label="主机地址" name="sftpHost">
          <a-input v-model:value="fromModel.sftpHost" placeholder="请输入主机地址"/>
        </a-form-item>
        <a-form-item label="端口" name="sftpPost">
          <a-input v-model:value="fromModel.sftpPost" placeholder="请输入路径"/>
        </a-form-item>
        <a-form-item label="用户名" name="sftpUserName">
          <a-input v-model:value="fromModel.sftpUserName" placeholder="请输入用户名"/>
        </a-form-item>
        <a-form-item label="密码" name="sftpPassword">
          <a-input v-model:value="fromModel.sftpPassword" placeholder="请输入密码"/>
        </a-form-item>
        <a-form-item label="路径" name="sftpRootPath">
          <a-input v-model:value="fromModel.sftpRootPath" placeholder="请输入用路径"/>
        </a-form-item>
        <a-form-item label="预览地址" name="sftpPreviewUrl">
          <a-input v-model:value="fromModel.sftpPreviewUrl" placeholder="请输入预览地址"/>
        </a-form-item>
      </div>
    </a-form>
    <template #extra>
      <a-space>
        <a-button type="primary" @click="handleOk">保存</a-button>
      </a-space>
    </template>
  </a-drawer>

</template>
<script setup lang="ts">
import {ref, defineProps, defineEmits, watch, defineComponent, computed} from 'vue'
import {OssConfigDetail, Role} from "@/types/global.ts";
import myIcon from '@/components/my-icon/index.vue'
import {useSystemStore} from '@/stroe'
import { useRouter} from "vue-router";
import {updateConfig} from '@/api/sys-setting/config.ts'
defineComponent({
  myIcon
})
  const props = defineProps(
      [
      'modelValue',
      'config','storageType'
  ]);
const storageType = computed(()=>props.storageType)
  const emits = defineEmits(['update:modelValue','success']);
const generateFrom = ():OssConfigDetail=>{
  return {
    localDomain:           '',
    localPath:           '',
    aliYunAccessKeyId:     '',
    aliYunAccessKeySecret: '',
    aliYunBucketName:      '',
    aliYunDomain:          '',
    aliYunEndPoint:        '',
    aliYunPrefix:          '',
    qCloudBucketName:      '',
    qCloudDomain:          '',
    qCloudPrefix:          '',
    qCloudSecretId:        '',
    qCloudSecretKey:       '',
    qCloudAppId:           '',
    qCloudRegion:           '',
    qiNiuAccessKey:        '',
    qiNiuBucketName:       '',
    qiNiuDomain:           '',
    qiNiuPrefix:           '',
    qiNiuSecretKey:        '',
    qiNiuPreViewEncryptKey:'',
    sftpHost:'',
    sftpPost:22,
    sftpUserName:'',
    sftpPassword:'',
    sftpRootPath:'',
    sftpPreviewUrl:'',
    type:                  0
  };
}
  const fromModel = ref(generateFrom());
  const open = ref(false);
  const config = computed(()=>props.config)
  const confirmLoading = ref(false);
  const formRef = ref();

const rules = {
  type:[
    { required: true, message: '存储类型不能为空'}
  ],
  localDomain:[
    { required: true, message: '域名不能为空'}
  ],

  localPath:[
    { required: true, message: '本地路径不能为空'}
  ],
  aliYunAccessKeyId:[
    { required: true, message: 'accessKeyId不能为空'}
  ],
  aliYunAccessKeySecret:[
    { required: true, message: 'accessKeySecret不能为空'}
  ],

  aliYunBucketName:[
    { required: true, message: '储存桶名称不能为空'}
  ],
  aliYunDomain:[
    { required: true, message: '域名不能为空'}
  ],
  aliYunEndPoint:[
    { required: true, message: 'endPoint不能为空'}
  ],
/*  aliYunPrefix:[
    { required: true, message: '手机号不能为空'}
  ],*/
  qCloudBucketName:[
    { required: true, message: '储存桶名称不能为空'}
  ],
  qCloudDomain:[
    { required: true, message: '域名不能为空'}
  ],
  /*qCloudPrefix:[
    { required: true, message: '手机号不能为空'}
  ],*/
  qCloudSecretId:[
    { required: true, message: 'secretId不能为空'}
  ],
  qCloudSecretKey:[
    { required: true, message: 'secretKey不能为空'}
  ],
  qCloudAppId:[
    { required: true, message: 'appId不能为空'}
  ],
  qCloudRegion:[
    { required: true, message: '地域不能为空'}
  ],
  qiNiuAccessKey:[
    { required: true, message: 'accessKey不能为空'}
  ],
  qiNiuBucketName:[
    { required: true, message: '储存桶名称不能为空'}
  ],
  qiNiuDomain:[
    { required: true, message: '域名不能为空'}
  ],
 /* qiNiuPrefix:[
    { required: true, message: '手机号不能为空'}
  ],*/
  qiNiuSecretKey:[
    { required: true, message: 'secretKey不能为空'}
  ],
  sftpHost:[
    { required: true, message: '主机地址不能为空不能为空'}
  ],
  sftpPost:[
    { required: true, message: '端口不能为空'}
  ],
  sftpUserName:[
    { required: true, message: '用户名不能为空'}
  ],
  sftpPassword:[
    { required: true, message: '密码不能为空'}
  ],
  sftpRootPath:[
    { required: true, message: '路径不能为空'}
  ],
  sftpPreviewUrl:[
    { required: true, message: '预览不能为空'}
  ],

}
const close = ()=>{
  fromModel.value = generateFrom();
  confirmLoading.value = false;
  emits('update:modelValue',false)
}
  const handleOk = ()=>{
    formRef.value
        .validate()
        .then(async () => {
          confirmLoading.value = true;
          console.log(config.value)
          const objKeys = Object.keys(fromModel.value);
          const obj = {...config.value};
          objKeys.forEach(item=>{
            if(fromModel.value[item]){
              obj[item] = fromModel.value[item]
            }else {
              delete obj[item]
            }
          })

          updateConfig({
            id:1,
            paramValue:JSON.stringify(obj)
          }).then(()=>{
            close();
            confirmLoading.value = false;
            emits("success")
          })


        })
        .catch(error => {
          confirmLoading.value = false;
          console.log('error', error);
        })
  }



watch(()=>props.modelValue,(value)=>{
  open.value = value;
},{immediate:true})


watch(()=>storageType.value,(value)=>{
    if(value!==''){
      const objKeys = Object.keys(config.value);
      objKeys.forEach(item=>{
        if(config.value[item]){
          fromModel.value[item] = config.value[item]
        }
      })
    }



  fromModel.value.type = value||0;

},{
  immediate:true,
  deep:true
})
</script>
<style scoped lang="scss">
.icon-group{
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  max-height: 300px;
  overflow: auto;
  .icon-item{
    margin: 5px;
    border:1px solid #949090;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border-radius: 5px;
    &.active{
      border:2px solid #0cacd3;
    }
  }
}
</style>
